<template>
    <div class="userpage">
      <div class="title flex">
        <el-button type="primary" @click="dialogStatus()">添加用户</el-button>
        <el-dialog title="保存用户" width="30%" :visible.sync="dialogFormVisible">
          <el-form :model="form2">
            <el-form-item label="用户名:" :label-width="formLabelWidth">
              <el-input v-model="form2.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" :label-width="formLabelWidth">
              <el-input v-model="form2.password" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="姓名" width="100">
        </el-table-column>
        <el-table-column  label="图片预览" width="180">
          <template slot-scope="scope">
            <img :src="scope.row.headUrl" width="40" height="40" alt="图片预览">
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="headUrl" label="图片地址" width="280">
        </el-table-column>
        <el-table-column  label="上传图片">
          <template slot-scope="scope">

            <el-upload
              class="upload-demo"
              action="/source/file/upload"
              multiple
              :limit="1"
              :on-success="uploadSuccess"
            >
              <el-button type="text" size="mini" @click="upload(scope.row.id)">上传图片</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"  label="创建时间" width="180">
        </el-table-column>
        <el-table-column  label="修改">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="dialogStatus(scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column  label="删除">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block page_num">
        <el-pagination
          layout="prev, pager, next, total"
          @current-change="handleCurrentChange"
          :current-page="form.pageNumber"
          :page-size="form.pageSize"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
  const baseUrl = 'http://192.168.3.175:8081/'
  export default {
    name: 'user',
    data () {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        form: {
          pageSize: 10,
          pageNumber: 1
        },
        form2: {
          username: '',
          password: '',
          id: undefined
        },
        total: 1,
        dialogFormVisible: false,
        formLabelWidth: '80px',
        upload_id: undefined
      }
    },
    created () {
      this.getuser()
    },
    methods: {
      getuser () {
        this.$api.getuser(this.form).then(res => {
          if (res.code === '000000') {
            this.tableData = res.data.list
            this.total = res.data.totalRow
          }
        })
      },
      dialogStatus (row) {
        this.form2.username = undefined
        this.form2.password = undefined
        this.form2.id = undefined
        this.dialogFormVisible = true
        if (row) {
          this.form2.id = row.id
          this.form2.username = row.username
        } else {
          this.form2.id = undefined
        }
      },
      saveUser (mes) {
        this.$api.saveUser(this.form2).then(res => {
          if (res.code === '000000') {
            this.$message.success('保存用户成功')
            this.dialogFormVisible = false
            this.getuser()
          }
        })
      },
      deleteUser (id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteUser(id).then(res => {
            if (res.code === '000000') {
              this.$message.success('删除用户成功')
              this.getuser()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      uploadSuccess (res, file) {
        console.log(res)
        this.$api.saveUser({id: this.upload_id, headUrl: baseUrl + res.data.url}).then(res => {
          if (res.code === '000000') {
            this.$message.success('上传成功')
            this.getuser()
          }
        })
      },
      upload (id) {
        this.upload_id = id
      },
      handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getuser()
      }
    }
  }
</script>

<style scoped>
  .userpage{
    overflow-x: auto;
  }
.title{
  padding: 10px 40px;
}
</style>
